<!DOCTYPE html>
<html>
    <head>
        <title>template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.js" ></script>
        <style>
            
        </style>
        <script type="text/javascript">
            var model1 = avalon.define({
                $id: "test1",
                content: "引入内部模板",
                name: "司徒正美",
                eee: "lala",
                change: function() {
                    model1.eee = model1.eee === "lala" ? "hehe" : "lala"
                }
            })


            var model2 = avalon.define({
                $id: "test2",
                url: "Template1",
                name: "司徒正美",
                password: '12345678',
                array: [1, 2, 3, 4, 5, 6, 7],
                add: function(e) {
                    if (this.value && e.which == 13) {//this为input元素
                        var a = this.value
                        model2.array.push(a)
                        this.value = "";
                    }
                }
            })
        </script>
    </head>
    <body>
       <!-- 
       对于页面内的模板，我们可以使用ms-include=”expr”绑定，
       对于独立于页面的模板，我们可以使用ms-include-src=”expr”绑定。
       ms-include要求对应一个ID（换言之，作为模板容器的script等标签必须指定ID），
       ms-include-src要求对应一个路径。
       需要注意的是ms-include或ms-include-src的属性值默认都是对应VM的一个属性，当作是一个变量，如果想直接使用字符串，那么需要使用双重引号。 -->
        <div ms-controller="test1">

            <!-- 页面内模板 ms-include=”expr”绑定-->
            <h1>ms-include</h1>
            <script type="avalon" id="tpl">
                here, {{ 3 + 6 * 5  }}
            </script>
            <script type="avalon" id="lala">
                <strong>{{name}}</strong>!!!
            </script>
            <script type="avalon" id="hehe">
               <em>{{content}}</em>!!!
            </script>
            <p>{{content}}<button ms-click="change" type="button">切换子模板</button></p>
            <div ms-include="'tpl'"></div><!--注意这里-->
            <div ms-include="eee"></div>
        </div>


        <!-- 立于页面的模板，ms-include-src=”expr”绑定-->
        <div ms-controller="test2">
            <h1>ms-include-src</h1>
            <select ms-duplex="url">
                <option>Template1</option>
                <option>Template2</option>
                <option>Template3</option>
            </select>
            <div ms-include-src="include{{url}}.html"></div>
        </div>
    </body>
</html>
